<template>
  <div class="dashboard-container">
    <div class="dashboard-text">用户名:{{user}}</div>
    <div class="dashboard-text">您的角色为:<span>{{userRole}}</span></div>
    <div class="dashboard-text">您的权限为:{{rolesDetail}}</div>
    <!-- 工作日设定提示框 锁死-->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose">
      <span style="font-size:20px;line-height:35px">您尚未设定工作日，请先<span style="color:red">设定工作日</span>，再进行其他操作！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="gotoWorkDay">转到工作日管理</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>

  </div>
  
</template>

<script>
import { mapGetters } from 'vuex'
import qs from "qs";
export default {
  name: 'dashboard',
  data (){
    return {
      dialogVisible:false
    }
  },
  computed: {
    // ...mapGetters([
    //   'name',
    //   'roles'    
    // ])
    userRole (){
      let a = this.$store.state.user.roles
      if(a == 2){
        a = "领导"
      }else if(a== 4){
        a = "员工"
      }else if(a == 3){
        a = "上级领导"
      }else{
        a = "超级管理员"
      }
      return a
    },
    user (){
      return window.localStorage.getItem("userName")
    },
    rolesDetail (){
      let b = this.$store.state.user.roles
      if(b == 2){
        b = "可查看员工考勤记录，导出月度考勤表！"
      }else if(b== 4){
        b = "可进行请假申请，异常维护申请，签到签退！"
      }else if(b == 3){
        b = "可处理直接下级的请假、异常申请！"
      }else{
        b = "可设置工作日，进行系统用户管理，用户角色管理！"
      }
      return b
    }
    
  },
  created() {
    let a = this.$store.state.user.roles*1 -1
     this.$axios
    .post("http://localhost:8088/isSetDay", qs.stringify({
      roleId:window.localStorage.getItem("roleId")
    }), {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
    .then(res => {
      console.log(res.data.data);
      window.localStorage.setItem("setDay",res.data.data)
      if(res.data.data=== false){
        console.log(window.localStorage.getItem("setDay"))
        this.dialogVisible = true
      }
    })
    // console.log(a)
    this.$router.addRoutes(this.$store.state.user.roleMap[a])
    
  },
  methods:{
    handleClose (){

    },
    gotoWorkDay (){
      console.log(1)
      this.dialogVisible = false
      this.$router.push({path:"/workDay/workDay"})  
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    width: 80%;
    height: 80;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  &-text {
    font-size: 22px;
    line-height: 50px;
    margin: 20px auto;
  }
}
</style>
